<template>
  <div style="height: 90px;display: flex;align-items: center">
    <img src="@/assets/icon/blog-t.png" style="height: 60px;margin: 15px;">
    <!--<span style="font-weight: bolder;font-size: 1.5em;padding-left: 15px;">DanTou Blog</span>-->
  </div>
  <el-row class="el-row" justify="center">
    <el-col :xl="5" :lg="6" :md="9" :sm="11">
      <!--<h2 style="font-weight: bolder">DanTou Blog</h2><br>-->
      <img src="@/assets/icon/register.png" style="height: 180px;margin-bottom: 20px">
      <p>万石谷，粒粒积累</p><br>
      <p>千丈布，根根织成</p><br>
    </el-col>
    <el-col :span="1">
      <el-divider direction="vertical"></el-divider>
    </el-col>
    <el-col :xl="5" :lg="6" :md="9" :sm="11">
      <h2 style="width: 400px;">用户注册</h2><br>
      <el-form ref="ruleFormRef"
               :model="ruleForm"
               :rules="rules"
               label-width="100px">
        <el-form-item label="用户昵称" prop="nickName" style="width: 400px;">
          <el-input v-model="ruleForm.nickName" type="text" maxlength="12" show-word-limit/>
        </el-form-item>
        <el-form-item label="登录账号" prop="username" style="width: 400px;">
          <el-input v-model="ruleForm.username" type="text" maxlength="12" show-word-limit/>
        </el-form-item>
        <el-form-item label="密&nbsp;&nbsp;&nbsp;&nbsp;码" prop="password" style="width: 400px;">
          <el-input v-model="ruleForm.password" type="password" :show-password="true"/>
        </el-form-item>
        <el-form-item label="验&nbsp;证&nbsp;码" prop="captchaCode" style="width: 400px;">
          <el-input v-model="ruleForm.captchaCode" style="width: 150px;float: left"/>
          <el-image :src="kaptchaSrc" class="captchaImg" @click="getNewKaptcha"></el-image>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">注册
          </el-button>
          <el-button @click="resetForm()">重置</el-button>
          <el-button @click="getCode()">验证码</el-button>
          <el-link type="info" @click="toLogin">已有账号？转去登录</el-link>
          <!--<el-button @click="testToken()">测试错误Token</el-button>-->
        </el-form-item>
      </el-form>

    </el-col>
  </el-row>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "Login",
  data() {
    return {
      kaptchaSrc: "/api/kaptcha",
      ruleForm: {
        nickName: '',
        username: '',
        password: '',
        captchaCode: '',
      },
      rules: {
        nickName: [
          {required: true, message: '请输入用户昵称', trigger: 'blur'},
          {min: 2, max: 12, message: '用户昵称长度应该在2-12位', trigger: 'blur'},
        ],
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 5, max: 12, message: '用户名长度应该在5-12位', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 24, message: '密码长度应该在6-24位', trigger: 'blur'},
        ],
        captchaCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 5, max: 5, message: '验证码长度应该在5位字母或数字', trigger: 'blur'},
        ],

      }
    }
  },
  methods: {
    submitForm: function () {
      this.$refs.ruleFormRef.validate(async (valid) => {
        if (valid) {
          let {data: result} = await this.$http.post("/api/login/register", this.ruleForm)
          console.log(result.dataMap)
          // 如果code == 200，保存数据，转到index
          if (result.code === 200) {
            ElMessage.success("注册成功，请登录！")
            this.$router.push({name: "login"})
          } else {
            // 如果code是其他，显示错误信息
            ElMessage.error(result.msg)
          }
        } else {
          ElMessage.error("表单填写有误！")
        }
      })

    },
    resetForm() {
      this.$refs.ruleFormRef.resetFields()
    },
    async getCode() {
      let result = await this.$http.get("/api/test/getKaptchaCode")
      console.log(result.data)
      this.ruleForm.captchaCode = result.data
    },
    getNewKaptcha() {
      this.kaptchaSrc = "/api/kaptcha?data=" + new Date()
    },
    testToken() {
      this.$http.get("/api/test/test")
    },
    toLogin() {
      this.$router.push({name: 'login'})
    }
  }
}
</script>

<style scoped>
.el-row {
  background-color: #fafafa;
  height: 90vh;
  display: flex;
  align-items: center;
  text-align: center;

}

.el-divider {
  height: 200px;
}

.captchaImg {
  float: right;
  height: 35px;
  margin-left: 10px;
  border-radius: 10px;
}
</style>